import React from 'react';
import { Select } from 'antd';

interface IVSelectProps {
  options: {
    text: string | React.ReactNode;
    value: any;
  }[];
  subComponent?: (option: any) => React.ReactNode;
  onChange?: (value: any) => void;
}

const VSelect: React.FC<IVSelectProps> = props => {
  const { options, subComponent, onChange, ...resetProps } = props;
  return (
    <Select
      options={
        !subComponent
          ? options.map(item => ({
              label: item.text,
              value: item.value,
            }))
          : undefined
      }
      style={{ width: '100%' }}
      onChange={onChange}
      allowClear={true}
      getPopupContainer={triggerNode => triggerNode?.parentNode}
      {...resetProps}
    >
      {subComponent
        ? options.map(option => {
            return (
              <Select.Option value={option.value} key={option.value}>
                {subComponent(option)}
              </Select.Option>
            );
          })
        : null}
    </Select>
  );
};

export default VSelect;
